import { Html } from "@react-three/drei";

export function ScreenSaver() {
  return (
    <Html
      transform
      distanceFactor={0.32}
      position={[-1.767, 1.22, -1.751]}
      rotation={[-0.228, 0.772, 0.16]}
      className="pointer-events-none"
      style={{
        transformStyle: "preserve-3d",
      }}
    >
      <video
        onCanPlay={(e) => {
          e.currentTarget.playbackRate = 0.25;
        }}
        autoPlay
        loop
        muted
        src="./videos/screen-saver.mp4"
        className="opacity-50 object-cover"
        style={{ width: 780, height: 550, backfaceVisibility: "hidden" }}
      />
    </Html>
  );
}
